<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .div2 {
            background-color:yellow; 
            width: 100px; 
            height: 100px;
        }
    </style>

    <link rel="stylesheet" href="chapter01.css">

</head>
<body>
    <h1>第一章 css基本原理</h1>

    <h2>1.1 css定义引入</h2>

        <h3>1.1.1 内联样式</h3>
            <div style="background-color:yellow; width: 100px; height: 100px;">
                div1
            </div>
        <h3>1.1.2 内部样式</h3>
            <div class="div2">
                div2
            </div>
        <h3>1.1.3 外部样式</h3>
            <div class="div3">
                div3
            </div>

    <h2>1.2 基本选择器</h2>

        <h3>1.2.1 *通配符</h3>
            所有的都加边框
        
        <h3>标签dev p</h3>
            <div>
                标签dev测试
                <p>
                    标签p测试
                </p>
            </div>
        
        <h3>id选择器</h3>
            <p id="txt">
                id选择器测试
            </p>
        
        <h3>class选择器</h3>
            <p class="class-test">
                class选择器测试，class选择器是最常用的选择器
            </p>
    <h2>1.3 css核心原理</h2>

        <ol>
            <li>同一个选择器：从上往下执行解析</li>
            <li>同一类型的选择器：从上往下</li>
            <li>不同类型的选择器：先低优先级，再高优先级 * < div < class < id</li>
            <li>先外部样式，再内部样式，再内联样式</li>
            <li>加了!important字段的，最后执行</li>

        </ol>
</body>
</html>